<template>
	<view class="page">
		<!-- <u-navbar title="军师" :is-back="false" background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat"></u-navbar> -->
		<u-navbar title="军师" :is-back="false" :background="{
		    url: 'https://www.yplm888.com/uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png',
		    repeat: 'no'
		}"></u-navbar>
		<view class="">
			<my-input @search="search" :value='searchVaule'></my-input>
		</view>

		<scroll-view class="" :scroll-y="true" :style="'height:' + scrollH+'rpx;'" @scrolltolower="lowerBottom" refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<view v-if="junDataList.length>0" class="course-wrap">
				<view @click="viewContentInfo(item.id)" class="live-list live-list-know" style="padding: 20rpx 0;"
					v-for="(item, index) in junDataList" :key="item.id">
					<view class="live-list-img-wrap img">
						<image class="live-list-img new-img img" :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="live-list-info" style="margin-top: -100rpx ; width: 430rpx;">
						<view class="live-c-title u-line-1 u-font-36">{{item.name}}</view>
						<view class="u-line-3 u-font-13" style="color: #c3c3c3; height: 130rpx; margin-left: 20rpx;">
							{{item.title}}
						</view>
						<view class="live-teacher-price"
							style="color: #ccc; margin-left: 20rpx; font-size: 20rpx; margin-top: 15rpx;">
							<!-- <img class="phone" src="@/static/phone.png" mode="aspectFill"></img>
								<i class="iconfont">{{'icon-shouji'}}</i>
								原配联盟黄娜老师一对一电话咨询 -->
							<u-icon name="calendar" size='22'></u-icon><text
								style="margin-left: 10rpx;">{{$u.timeFormat(item.createtimel, 'yyyy-mm-dd')}}</text>
						</view>
					</view>
					<view class="num">
						<u-icon class='icon' name="eye" size='22'></u-icon><text
							style="margin-left: 10rpx;">{{item.reading_volume}}</text>
					</view>
				</view>
			</view>
			<view v-else style="margin-top:150rpx">
				<no-thing></no-thing>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import myInput from '../components/my-input.vue'
	import noThing from '@/components/common/no-thing.vue'

	export default {
		components: {
			myInput,
			noThing
		},
		data() {
			return {
				phoneImage: 'https://www.yplm888.com/uploads/20240204/dc049e25534bef667667c3213b67f31a.png',
				searchVaule: '',
				scrollH: 0,
				junDataList: [],
				page: 1,
				baseUrl: this.$u.http.config.baseUrl,
				triggered: false,
			}
		},
		onHide() {
			this.searchVaule = ''
		},
		onReady() {
			// this.getnums();
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 200;
					// #endif
				}
			});
		},
		onLoad() {
			this._freshing = false;
			this.initData()
		},
		methods: {
			viewContentInfo(id) {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/junshiDetail/junshiDetail', {
						id
					})
				} else{
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}

			},
			search(value) {
				console.log(value)
				this.searchVaule = value
				this.junDataList = []
				this.initData()
			},
			async initData() {
				let queryData = {
					keyword: this.searchVaule,
					page: this.page,
					limit: 10,
					hot_switch: ''
				}
				await this.$u.api.getJunshiTeamList(queryData).then(res => {
					if (res.code === 1) {
						// this.junDataList = res.data
						let dataList = res.data
						this.junDataList =[...this.junDataList, ...dataList]
					} else {
						this.$u.toast(res.msg)
					}

				})
				
			},
			onPulling(e) {
				this.triggered = true;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.page = 1;
				await setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.junDataList = []
					this.initData();
				}, 1000);
				uni.showToast({
					title: '刷新成功',
					duration: 1000
				})
			},
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			// 触底加载
			lowerBottom() {
				this.page++;
				this.initData();
			}
		}
	}
</script>

<style lang="scss">
	@import url("/static/css/review.css");
	@import url("/static/css/index.css");
	@import url("/static/css/course_list.css");


	.course-wrap {
		// margin-top: -40rpx;
		padding: 0rpx 40rpx;
		padding-bottom: 20rpx;

	}

	// .img{
	// 	height: 220rpx;
	// 	width: 220rpx;
	// }

	.phone {
		margin-right: 5rpx;
		height: 25rpx;
		width: 20rpx;
		overflow-y: auto;
		font-size: 18rpx;
	}

	.live-list {
		width: 100%;
		border-radius: 40rpx;
		margin: 20rpx 0;
		height: 280rpx;
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
		position: relative;
		display: flex;
		align-items: center;


		.img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 20rpx;
			margin: auto 0;
			margin-left: 10rpx;
		}

		.num {
			font-size: 20rpx;
			position: absolute;
			top: 0;
			right: 80rpx;
			text-align: center;
			height: 40rpx;
			width: 120rpx;
			color: #FE5477;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			background-color: #FFEBEF;
		}
	}

	.live-c-title {
		margin-left: 20rpx;
		height: 50rpx;
		// line-height: 38rpx;
	}
</style>
